<template>
  <div class="form stick-wrapper">
    <Nav :title="title"></Nav>
    <div class="content">
      <h2 class="title">数据录入</h2>
      <div class="form">
        <div class="hour-section m-b-15">
          <h3 class="title">请选择时间</h3>
          <div class="selected-time">{{selected_hours_print}}</div>
          <div class="section-container">
            <div class="item"
                 :class="{active: selected_hours.indexOf(idx) !== -1}"
                 v-for="(item, idx) in hours" :key="item"
                 @click="handleHourClick(idx)"
            >{{item}}</div>
          </div>
        </div>
        <div class="bill-form m-b-15">
          <h3 class="title">请输入每月电量(KWH)</h3>
          <div class="form-container">
            <div class="form-wrapper" v-for="(item, idx) in bills" :key="idx">
              <input type="number" class="text"
                     v-model="bills[idx]"
                     :placeholder="(idx + 1) + '月'">
            </div>
          </div>
        </div>
        <div class="start" @click="handleSubmit">下一步</div>
      </div>
    </div>
    <div class="stick-footer">
      <Footer></Footer>
    </div>  </div>
</template>

<script>
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import utils from '../utils/common'

export default {
  name: 'ElectricForm',
  data () {
    return {
      title: '数据录入 - MecKey能源商城',
      hours: [],
      selected_hours: [],
      bills: []
    }
  },
  mounted () {
    for (let i = 0; i < 24; i++) {
      this.hours.push(i + ':00')
    }
    for (let i = 0; i < 12; i++) {
      this.bills.push('')
    }
  },
  components: {
    Nav,
    Footer
  },
  methods: {
    handleHourClick (index) {
      const idx = this.selected_hours.indexOf(index)
      if (idx === -1) {
        // 数组中没有数据
        this.selected_hours.push(index)
      } else {
        // 数组中已存在数据
        this.selected_hours.splice(idx, 1)
      }
    },
    handleSubmit () {
      this.$http.post('set_es_data', {
        hours: JSON.stringify(this.selected_hours),
        bills: JSON.stringify(this.bills)
      }).then(res => {
        this.$router.push('/es_charts')
      })
    }
  },
  computed: {
    selected_hours_print () {
      let str = ''
      const arr = []
      for (const item of this.selected_hours) {
        arr.push(item)
      }
      utils.sort(arr)
      const blocks = []
      let block = []
      if (arr.length === 24) {
        for (let i = 0; i < 24; i++) {
          block.push(i)
        }
        blocks.push(block)
      } else {
        for (let i = 0; i < arr.length; i++) {
          block.push(arr[i])
          if (i + 1 === arr.length) {
            blocks.push(block)
            block = []
          } else {
            if (arr[i + 1] !== arr[i] + 1) {
              blocks.push(block)
              block = []
            }
          }
        }
      }
      if (blocks.length > 0 && blocks[0].length < 24) {
        if (blocks[0][0] === 0) {
          if (blocks[blocks.length - 1][blocks[blocks.length - 1].length - 1] === 23) {
            blocks[blocks.length - 1] = blocks[blocks.length - 1].concat(blocks[0])
            blocks.shift()
          }
        }
      }
      for (const item of blocks) {
        str += item[0] + ':00'
        str += '-' + (item[item.length - 1] + 1 === 24 ? 0 : item[item.length - 1] + 1) + ':00; '
      }
      return str
    }
  }
}
</script>

<style scoped>
  .content {
    padding: 16px;
    margin-bottom: 20px;
  }
  .content h2.title {
    font-size: 24px;
    line-height: 50px;
    text-align: center;
  }
  .content h3.title {
    font-size: 18px;
    line-height: 42px;
    margin-bottom: 12px;
  }
  .section-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
  }
  .section-container .item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 5px;
    background-color: #f5f5f5;
    color: #919191;
    font-weight: bold;
    border-radius: 50px;
    transition: all .3s;
  }
  .section-container .item.active {
    background-color: #6495ed;
    color: #ffffff;
  }
  .selected-time {
    color: #333;
    line-height: 20px;
    min-height: 20px;
    margin-bottom: 6px;
    font-weight: bold;
  }
  .form-container {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .form-container .form-wrapper {
    width: calc(25% - 5px);
    margin-bottom: 10px;
  }
  .form-wrapper input.text {
    outline: none;
    width: 100%;
    height: 46px;
    border-radius: 6px;
    border: 1px solid #eeeeee;
    padding: 0 10px;
    font-size: 15px;
  }
  .start {
    display: block;
    width: calc(100% - 32px);
    line-height: 50px;
    background-color: #0095ff;
    color: white;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    font-size: 18px;
  }
</style>
